
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>搜索页</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 消息提示框 CSS 文件 -->
    <link rel="stylesheet" href="css/toast.css" type="text/css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body >
    <div class="tongdui-wrapper">
        <!-- 顶部 -->
        <div class="top-nav clearfix search-nav">
            <div class="top-nav-left">
                <a href="" class="iconfont">&#xe64a;</a>
            </div>
            <div class="top-nav-center">
                <input type="text" placeholder="小米 5s">  
            </div>
            <div class="top-nav-right">
                <a href="index.html" class="">取消</a>
            </div>
        </div>
        
        
        <div class="search-top">
            <!-- 搜索记录 -->
            <div class="search-recently container-a">
                <h5 class="clearfix">
                    <div class="left">
                        <span class="iconfont">&#xe8e0;</span>最近搜索
                    </div>
                    <div class="right item">
                        <a href="#" class="tosat1 iconfont">&#xe608;</a>
                    </div>
                </h5>
                <ul class="recently-record clearfix">
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                </ul>
            </div>

            <!-- 热门搜索 -->
            <div class="search-recently container-a search-hot">
                <h5 class="clearfix">
                    <div class="left">
                       <span class="iconfont">&#xe63a;</span>热门搜索
                    </div>
                </h5>
                <ul class="clearfix">
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                    <li><a href="product.html">水杯</a></li>
                    <li><a href="product.html">羽绒服</a></li>
                </ul>
            </div>
        </div>

        <!-- 返回顶部 -->
        <div class="actGotop iconfont">
            &#xe63c;
        </div>
    </div>

    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 消息提示框 -->
    <script src="js/toast.js"></script>
    <script type="text/javascript">
        $('.tosat1').on('click', function ( e ) {
                $.toast({
                text: "搜索记录已清除",  
                showHideTransition: 'fade', //plain fade slide
                allowToastClose: false, 
                hideAfter: 2000, 
                stack: 1, 
                position: 'mid-center', 
                textAlign: 'center',  
                loader: false, 
                loaderBg: '#ec3331',  
                beforeShow: function () {}, 
                afterShown: function () {}, 
                beforeHide: function () {}, 
                afterHidden: function () {}  
            });
            $(".recently-record li").remove();
        });

    </script>
     <!-- 返回顶部 -->
    <script>
        $(function(){ 
          $(window).scroll(function() {   
            if($(window).scrollTop() >= 50){
              $('.actGotop').fadeIn(300); 
            }else{    
              $('.actGotop').fadeOut(300);    
            }  
          });
          $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
        });
    </script>
</body>
</html>
